<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8" />
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport"
    content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  <title>数字孪生演示项目</title>
  <script src="Build/Cesium/Cesium.js"></script>
  <script src="../Build//cesium-navigation/viewerCesiumNavigationMixin.js"></script>
  <style>
    @import url(Build/Cesium/Widgets/widgets.css);

    html,
    body,
    body {
      padding: 0;
      margin: 0 auto;
    }
    .content {
      height: 1800px;
      width: 100%;
      text-align: center;
    }
    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #eye {
      position: absolute;
      width: 20%;
      height: 28%;
      top: 10px;
      left: 10px;
      opacity: 0.8;
      background-size: 100%;
    }

    /* 触发弹窗图片的样式 */
    #myImg {
      border-radius: 5px;
      cursor: pointer;
      transition: 0.3s;
    }

    #myImg:hover {
      opacity: 0.7;
    }

    #footer {
      height: 40px;
      line-height: 40px;
      position: fixed;
      bottom: 0;
      width: 100%;
      text-align: center;
      background: #333;
      color: #fff;
      font-family: Arial;
      font-size: 12px;
      letter-spacing: 1px;
    }

    /* 弹窗背景 */
    .modal {
      display: none;
      /* Hidden by default */
      position: fixed;
      /* Stay in place */
      z-index: 1;
      /* Sit on top */
      padding-top: 100px;
      /* Location of the box */
      left: 0;
      top: 0;
      width: 100%;
      /* Full width */
      height: 100%;
      /* Full height */
      overflow: auto;
      /* Enable scroll if needed */
      background-color: rgb(0, 0, 0);
      /* Fallback color */
      background-color: rgba(0, 0, 0, 0.9);
      /* Black w/ opacity */
    }

    /* 图片 */
    .modal-content {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 1100px;
    }

    /* 文本内容 */
    #caption {
      margin: auto;
      display: block;
      width: 80%;
      max-width: 1100px;
      text-align: center;
      color: #ccc;
      padding: 10px 0;
      height: 100px;
    }

    /* 添加动画 */
    .modal-content,
    #caption {
      -webkit-animation-name: zoom;
      -webkit-animation-duration: 0.6s;
      animation-name: zoom;
      animation-duration: 0.6s;
    }

    @-webkit-keyframes zoom {
      from {
        -webkit-transform: scale(0)
      }

      to {
        -webkit-transform: scale(1)
      }
    }

    @keyframes zoom {
      from {
        transform: scale(0)
      }

      to {
        transform: scale(1)
      }
    }

    /* 关闭按钮 */
    .close {
      position: absolute;
      top: 50px;
      right: 35px;
      color: #f1f1f1;
      font-size: 40px;
      font-weight: bold;
      transition: 0.3s;
    }

    .close:hover,
    .close:focus {
      color: #bbb;
      text-decoration: none;
      cursor: pointer;
    }

    /* 小屏幕中图片宽度为 100% */
    @media only screen and (max-width: 700px) {
      .modal-content {
        width: 100%;
      }
    }
  </style>
</head>

<body>
  <div id="cesiumContainer"></div>
  <div id="eye">
    <img id="myImg" src="Model/dg.jpg" alt="智慧港区鸟瞰图" width="300" height="200">
    <div id="myModal" class="modal">
      <span class="close" onclick="document.getElementById('myModal').style.display='none'">×</span>
      <img class="modal-content" id="img01">
      <div id="caption"></div>
    </div>
  </div>
  <div id="footer">
    iPort[dt-demo] @ 2023
    <a href="https://blog.csdn.net/qq_41854291?type=blog">zolty</a>
  </div>
  <script>
    // 获取弹窗
    var modal = document.getElementById('myModal');
    // 获取图片插入到弹窗 - 使用 "alt" 属性作为文本部分的内容
    var img = document.getElementById('myImg');
    var modalImg = document.getElementById("img01");
    var captionText = document.getElementById("caption");
    img.onclick = function () {
      modal.style.display = "block";
      modalImg.src = this.src;
      captionText.innerHTML = this.alt;
    }
    // 获取 <span> 元素，设置关闭按钮
    var span = document.getElementsByClassName("close")[0];
    // 当点击 (x), 关闭弹窗
    span.onclick = function () {
      modal.style.display = "none";
    }
    // 模型偏转函数
    function update3dtilesMaxtrix(model, params) {
      //旋转
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(params.rx));
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(params.ry));
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(params.rz));
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //平移
      var position = Cesium.Cartesian3.fromDegrees(params.tx, params.ty, params.tz);
      var m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      //旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      //赋值给model
      model.modelMatrix = m;
    };

    let x = 117.815772;
    let y = 38.999202;

    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNDYwNjRiYS0zYjhjLTQ3MWMtYjI5Yi1kNzRiM2RiMWY3ZjMiLCJpZCI6MTA1NDM4LCJpYXQiOjE2OTQ2ODE0NDd9.ipV0Jnr1FUWenQslbTK2sUY9RHotDrdh120xtaPzqvU';
    const viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: false,				//隐藏查找控件
      homeButton: false,				//隐藏视角返回初始位置按钮
      sceneModePicker: false,			//隐藏视角模式3D 2D CV
      baseLayerPicker: false,			//隐藏图层选择
      navigationHelpButton: false,	//隐藏帮助
      animation: false,				//隐藏动画控件
      timeline: false,				//隐藏时间线控件
      fullscreenButton: false		//隐藏全屏
    });
    viewer._cesiumWidget._creditContainer.style.display = "none";    		//隐藏ion

    //add 3d gltf
    var scene = viewer.scene;
    var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(x, y, -10.0));
    var model = scene.primitives.add(Cesium.Model.fromGltf({
      url: 'Model/dgv2.gltf',//模型文件相对路径
      modelMatrix: modelMatrix,
      scale: 80 //调整模型在地图中的大小  
    }));
    var params = {
      tx: 117.815772,     //模型中心X轴坐标（经度，单位：十进制度）
      ty: 38.999202,    //模型中心Y轴坐标（纬度，单位：十进制度）
      tz: 0,              //模型中心Z轴坐标（高程，单位：米）
      rx: 0,              //X轴（经度）方向旋转角度（单位：度）
      ry: 0,              //Y轴（纬度）方向旋转角度（单位：度）
      rz: 270             //Z轴（高程）方向旋转角度（单位：度）
    };
    update3dtilesMaxtrix(model, params);

    viewer.camera.setView({
      destination: Cesium.Cartesian3.fromDegrees(x, y, 4000.0)
    });

    var options = {};
    options.defaultResetView = new Cesium.Cartographic(Cesium.Math.toRadians(114), Cesium.Math.toRadians(33), 500);
    // Only the compass will show on the map
    options.enableCompass = true;
    options.enableZoomControls = true;
    options.enableDistanceLegend = true;
    options.enableCompassOuterRing = false;
    viewer.extend(Cesium.viewerCesiumNavigationMixin, options);
  </script>
</body>

</html>